<template>
  <div class="bound">
    <!-- 手机绑定过程 -->
    <div class="shade" v-show="bindtel">
      <p>手机号绑定</p>
      <div :model="model" class="telbox">
        <cube-form-group class="telform">
          <div class="telinput">
            <input
              type="text"
              maxlength="11"
              onkeyup="value=value.replace(/[^\d\.]/g,'')"
              v-model="model.tel"
              @input="telblur"
              placeholder="请填写手机号"
            />
          </div>
          <div class="telinput">
            <input
              type="text"
              maxlength="4"
              onkeyup="value=value.replace(/^[0-9a-zA-Z]{11}$/g,'')"
              v-model="model.graph"
              placeholder="请填写图形验证码"
            />
            <img class="imgcode" :src="imgcode" @click="getCaptchImg" />
          </div>
          <div class="telinput">
            <input
              v-model="model.verifyNum"
              maxlength="6"
              onkeyup="value=value.replace(/[^\d\.]/g,'')"
              placeholder="请填写短信验证码"
            />
            <button
              :class="notecode"
              :disabled="disabled"
              @click="msgcode"
              v-show="isshow"
            >{{codetext}}</button>
          </div>
          <p class="prompt" v-show="statu">
            <img src="../assets/error.png" alt />
            <span>{{errorText}}</span>
          </p>
        </cube-form-group>
        <cube-form-group align="center" class="TelBtn">
          <button :disabled="isDisabled" :class="{BtnBound:true,visit:visits}" @click="btnsubmit">
            <!-- <span>确定</span> -->
            确定
          </button>
        </cube-form-group>
      </div>
    </div>

    <!-- 手机绑定成功  -->
    <div v-show="binds">
      <dl class="telsimg">
        <dt>
          <img src="../assets/bindT.png" alt />
        </dt>
        <dd>手机号绑定成功了！</dd>
      </dl>
      <button class="BtnVisit" @click="canclego()">确定</button>
    </div>

    <!-- 手机绑定失败 -->
    <div v-show="bindf">
      <dl class="telsimg">
        <dt>
          <img src="../assets/bindF.png" alt />
        </dt>
        <dd>手机号绑定失败！</dd>
      </dl>
      <div class="btnchoice">
        <button class="cancel" @click="canclego()">取消</button>
        <button class="retry" @click="retrygo()">重试</button>
      </div>
    </div>
  </div>
</template>

<script>
import { captcha, telverify, userbind } from "../api/captch";
export default {
  data() {
    return {
      model: {
        tel: "",
        graph: "",
        verifyNum: ""
      },
      imgcode: "",
      errorText: "",
      statu: false,
      notecode: { bluecode: true, gray: true },
      disabled: true,
      time: "",
      codetext: "获取验证码",
      Btnsure: { BtnBound: true, visit: false },
      isshow: true,
      bindtel: true,
      binds: false,
      bindf: false
    };
  },
  props: ["doctor_id"],
  computed: {
    visits: function() {
      if (
        this.model.tel != "" &&
        this.model.graph.length == 4 &&
        this.model.verifyNum.length == 6
      ) {
        return true;
      } else {
        return false;
      }
    },
    isDisabled: {
      get: function() {
        if (
          this.model.tel != "" ||
          this.model.graph != "" ||
          this.model.verifyNum != ""
        ) {
          return false;
        } else {
          return true;
        }
      },
      set: function(newV) {
        console.log(newV);
      }
    }
  },
  watch: {
    "model.graph": function(newVal, oldVal) {
      if (newVal.length == 4) {
        this.disabled = false;
        this.notecode.gray = false;
      } else {
        this.disabled = true;
        this.notecode.gray = true;
      }
    }
  },
  created() {
    this.getCaptchImg();
    // this.openIds();
  },
  methods: {
    statushow() {
      if (this.statu == true) {
        setTimeout(() => {
          this.statu = false;
        }, 5000);
      }
    },
    getCaptchImg() {
      captcha().then(res => {
        this.imgcode = res.data.img;
        this.imgkey = res.data.key;
      });
    },
    //手机号
    telblur() {
      console.log(111);
    },
    //发送短信验证码
    msgcode() {
      telverify({
        type: "cards",
        mobile: this.model.tel,
        code: this.model.graph,
        key: this.imgkey
      }).then(res => {
        if (res.code == 200) {
          this.notecode.gray = false;
          this.disabled = false;
          this.time = 60;
          this.timer();
        } else {
          this.errorText = res.message;
          this.statu = true;
          this.statushow();
        }
      });
    },
    // 短信发送时长60秒
    timer() {
      if (this.time > 0) {
        this.disabled = true;
        this.time--;
        this.codetext = this.time + "秒后可重新获取";
        this.notecode.gray = true;
        setTimeout(this.timer, 1000);
      } else {
        this.time = 0;
        this.disabled = false;
        this.codetext = "获取验证码";
        this.notecode.bluecode = true;
        this.notecode.gray = false;
      }
    },
    //提交
    btnsubmit() {
      if (this.model.tel == "" || this.model.tel == undefined) {
        this.errorText = "请输入手机号";
        this.statu = true;
        this.statushow();
        return true;
      } else if (!/^1[3456789]\d{9}$/.test(this.model.tel)) {
        this.errorText = "手机号格式错误";
        this.statu = true;
        this.statushow();
        return true;
      } else if (this.model.graph == "" || this.model.graph == undefined) {
        this.errorText = "请输入图形码";
        this.statu = true;
        this.statushow();
        this.notecode.gray = true;
        return true;
      } else if (this.model.graph.length < 4) {
        this.errorText = "验证码不符合规范";
        this.statu = true;
        this.statushow();
        this.notecode.gray = true;
        return true;
      } else if (
        this.model.verifyNum == "" ||
        this.model.verifyNum == undefined
      ) {
        this.errorText = "请输入验证码";
        this.statu = true;
        this.statushow();
        return true;
      } else if (this.model.verifyNum.length < 6) {
        this.errorText = "验证码不符合规范";
        this.statu = true;
        this.statushow();
        return true;
      } else {
        this.statu = false;
        this.disabled = false;
        telverify({
          type: "cards",
          mobile: this.model.tel,
          code: this.model.graph,
          key: this.imgkey
        }).then(res => {
          if (res.code == 200) {
            this.notecode.gray = false;
            this.disabled = false;
            userbind({
              code: this.model.verifyNum,
              wx_nickname: localStorage.nickname,
              openid: localStorage.openid,
              sex: localStorage.sex,
              mobile: this.model.tel,
              doctor_id: this.doctor_id
            }).then(res => {
              console.log(res.code);
              if (res.code == 200) {
                this.bindtel = false;
                this.binds = true;
                
              } else {
                this.bindtel = false;
                this.bindf = true;
              }
            });
          } else {
            this.errorText = res.message;
            this.statu = true;
            this.statushow();
          }
        });
      }
      this.isDisabled = false;
    },
    //取消
    canclego() {
      this.$emit("closechild");
    },
    // 重试
    retrygo() {
      this.bindf = false;
      this.bindtel = true;
    },
    // skip(){
      
    // }
  }
};
</script>
<style scoped>
.telbox {
  background: transparent;
}
.telform {
  position: relative;
  padding-bottom: 40px;
}
.telinput {
  width: 550px;
  height: 80px;
  line-height: 80px;
  border: 2px solid #999999;
  border-radius: 8px;
  margin: 15px auto;
  text-align: left;
  padding: 0 20px;
  box-sizing: border-box;
  font-size: 36px;
  position: relative;
}
.telinput input {
  width: 250px;
  height: 100%;
  font-family: PingFangSC, PingFangSC-Regular;
  background: transparent;
}
.telinput:first-child input {
  width: 100%;
}
.bluecode {
  outline: none;
  border: none;
  padding: 0;
  line-height: 76px;
  box-sizing: border-box;
  float: right;
  color: #007cff;
  font-size: 30px;
  background-color: transparent;
  font-weight: 500;
}
.gray {
  outline: none;
  border: none;
  padding: 0;
  line-height: 76px;
  box-sizing: border-box;
  float: right;
  color: #999999;
  font-size: 30px;
  background-color: transparent;
  font-weight: 500;
}
.imgcode {
  float: right;
  width: 150px;
  height: 50px;
  margin-top: 15px;
}
.TelBtn.cube-form-group {
  overflow: visible;
}
.BtnBound {
  border: none;
  width: 550px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  display: block;
  margin: 10px auto;
  cursor: pointer;
  border-radius: 60px;
  font-size: 38px;
  font-weight: 500;
  color: #afb7c1;
  letter-spacing: 20px;
  background: linear-gradient(
    135deg,
    rgba(49, 193, 255, 0.2),
    rgba(0, 124, 255, 0.2)
  );
  box-shadow: 0px 10px 20px 0px rgba(0, 124, 255, 0.1);
}
.visit {
  background: linear-gradient(135deg, #31c1ff, #007cff);
  box-shadow: 0px 10px 20px 0px rgba(0, 124, 255, 0.5);
  color: #ffffff;
}
.prompt {
  color: #ff5050;
  font-size: 28px;
  display: flex;
  display: -webkit-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
.prompt img {
  width: 32px;
  height: 32px;
  margin: 4px 0;
}
.shade > p {
  font-size: 36px;
  font-weight: bold;
  text-align: center;
  padding: 50px 0 40px;
}
.telsimg {
  font-size: 36px;
  text-align: center;
  padding: 50px 0;
}
.telsimg img {
  width: 298px;
  height: 312px;
}
.telsimg dd {
  margin-top: 20px;
}
.BtnVisit {
  border: none;
  width: 550px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  display: block;
  margin: 10px auto 20px;
  cursor: pointer;
  border-radius: 60px;
  font-size: 38px;
  font-weight: 500;
  letter-spacing: 20px;
  background: linear-gradient(135deg, #31c1ff, #007cff);
  box-shadow: 0px 10px 20px 0px rgba(0, 124, 255, 0.5);
  color: #ffffff;
}
.btnchoice {
  text-align: center;
  padding-bottom: 20px;
}
.btnchoice > button {
  display: inline-block;
  width: 259px;
  height: 102px;
  line-height: 100px;
  border-radius: 60px;
  font-size: 38px;
  letter-spacing: 10px;
  margin: 0 20px;
  border: none;
}
.cancel {
  border: 2px solid #007cff !important;
  color: #007cff;
  outline: none;
  background: transparent;
}
.retry {
  color: #ffffff;
  font-weight: 500;
  background: linear-gradient(135deg, #31c1ff, #007cff);
  box-shadow: 0px 10px 20px 0px rgba(0, 124, 255, 0.5);
}
</style>